// 作用：实现用户列表功能

import React, { Component } from "react";
import { PageHeader, Button, Table, Tag, Space, Pagination, Modal } from "antd";
import Model from "@/models/users";
// 导入echarts
import * as echarts from "echarts/core";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import { PieChart } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
echarts.use([TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer]);

class Index extends Component {
    // 状态
    state = {
        paginate: {},
        // 页码
        page: 1,
        // 关键词的数据
        keyword: "",
        // 模态窗口的控制开关
        visible: false,
        // 统计数据的值
        statistics: [],
    };

    //  表格的标题数据
    columns = [
        {
            title: "ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "用户名",
            dataIndex: "username",
            key: "username",
        },
        {
            title: "邮箱",
            dataIndex: "email",
            key: "email",
        },
        {
            title: "性别",
            dataIndex: "gender",
            key: "gender",
            render: (gender) => {
                switch (gender) {
                    case "1":
                        return "男";
                    case "2":
                        return "女";
                    default:
                        return "保密";
                }
            },
        },
        {
            title: "状态",
            key: "status",
            dataIndex: "status",
            render: (status) => <>{status === "1" ? <Tag color="green">正常</Tag> : <Tag color="red">禁用</Tag>}</>,
        },
        {
            title: "操作",
            key: "action",
            render: (text, record) => (
                <Space size="middle">
                    <span>编辑</span>
                    <span>删除</span>
                </Space>
            ),
        },
    ];
    render() {
        return (
            <div>
                {/* 页面头部 */}
                <PageHeader
                    ghost={false}
                    title="用户管理"
                    subTitle="这是用户管理模块，当前实现的功能是用户列表！"
                    extra={[
                        <Button key="2" onClick={this.showModal}>
                            统计数据
                        </Button>,
                        <Button key="1" type="primary">
                            新增
                        </Button>,
                    ]}
                ></PageHeader>

                {/* 表格 */}
                <Table columns={this.columns} dataSource={this.state.paginate.data} pagination={false} rowKey={(row) => row.id} />

                {/* 后台分页实现 */}
                <div style={{ marginTop: "20px", textAlign: "center" }}>
                    <Pagination defaultCurrent={this.state.page} total={this.state.paginate.total} onChange={this.changePage} showSizeChanger={false} />
                </div>

                {/* 统计的模态窗口 */}
                <Modal
                    title="男女会员比例统计"
                    centered
                    visible={this.state.visible}
                    onOk={() => this.setVisible(false)}
                    onCancel={() => this.setVisible(false)}
                    width={1000}
                >
                    {/* 这里放置图表 */}
                    <div id="main" style={{ height: "450px", width: "900px" }}></div>
                </Modal>
            </div>
        );
    }

    // 更改模态窗口的状态
    setVisible = (flag) => {
        this.setState(() => {
            return {
                visible: flag,
            };
        });
    };

    // 展示统计数据的模态窗口
    showModal = () => {
        // this.setVisible(true);
        // 获取数据
        Model.getStatistics().then((ret) => {
            if (ret.errNo === 0) {
                // 成功展示数据
                this.setState(
                    () => {
                        // 赋值数据
                        return {
                            visible: true,
                            statistics: ret.data,
                        };
                    },
                    () => {
                        // 在这里展示图表
                        var chartDom = document.getElementById("main");
                        var myChart = echarts.init(chartDom);
                        var option;

                        option = {
                            title: {
                                text: "本站会员性别比例饼状图",
                                subtext: "数据来自于数据库",
                                left: "center",
                            },
                            tooltip: {
                                trigger: "item",
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },
                            legend: {
                                orient: "vertical",
                                left: "left",
                            },
                            series: [
                                {
                                    name: "性别",
                                    type: "pie",
                                    // 半径
                                    radius: "60%",
                                    data: this.state.statistics,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: "rgba(0, 0, 0, 0.5)",
                                        },
                                    },
                                },
                            ],
                        };
                        option && myChart.setOption(option);
                    }
                );
            }
        });
    };

    // 生命周期
    componentDidMount() {
        // 请求数据
        this.loadData();
    }

    // 封装请求数据的方法
    loadData = () => {
        // 获取请求参数
        let obj = {
            keyword: this.state.keyword,
            page: this.state.page,
        };
        // 模型发送请求
        Model.getUserList(obj).then((ret) => {
            // console.log(ret);
            this.setState(() => {
                return {
                    paginate: ret.paginate,
                };
            });
        });
    };

    //页码改变事件处理程序
    changePage = (page, pageSize) => {
        this.setState(
            () => {
                return { page };
            },
            () => this.loadData()
        );
    };
}

export default Index;
